<template>
  <view class="masonry">
    <template v-if="tabIndex === 0">
      <view class="column">
        <view class="card topic">
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/topic_1.jpg"
          ></image>
          <view class="name">忙里忙外，回家吃饭</view>
          <view class="price">19.9元<text>起</text></view>
          <view class="extra">
            <text class="icon-heart">1220</text>
            <text class="icon-preview">1000</text>
          </view>
        </view>
        <view class="card brand">
          <view class="locate"> <text class="icon-locate"></text>中国 </view>
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/brand_logo_6.jpg"
          ></image>
          <view class="name">小米优购</view>
          <view class="alt">小米优购闪购嗨购</view>
        </view>
        <view class="card goods">
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/goods_big_6.jpg"
          ></image>
          <view class="name"
            >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
            鹅软石桌布yg056</view
          >
          <view class="price">¥899</view>
        </view>
        <view class="card brand">
          <view class="locate"> <text class="icon-locate"></text>中国 </view>
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/brand_logo_8.jpg"
          ></image>
          <view class="name">小米优购</view>
          <view class="alt">小米优购闪购嗨购</view>
        </view>
        <view class="card goods">
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/goods_big_7.jpg"
          ></image>
          <view class="name"
            >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
            鹅软石桌布yg056</view
          >
          <view class="price">¥899</view>
        </view>
      </view>
      <view class="column">
        <view class="card goods">
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/goods_big_5.jpg"
          ></image>
          <view class="name"
            >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
            鹅软石桌布yg056</view
          >
          <view class="price">¥899</view>
        </view>
        <view class="card brand">
          <view class="locate"> <text class="icon-locate"></text>中国 </view>
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/brand_logo_7.jpg"
          ></image>
          <view class="name">小米优购</view>
          <view class="alt">小米优购闪购嗨购</view>
        </view>
        <view class="card topic">
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/topic_2.jpg"
          ></image>
          <view class="name">忙里忙外，回家吃饭</view>
          <view class="price">19.9元<text>起</text></view>
          <view class="extra">
            <text class="icon-heart">1220</text>
            <text class="icon-preview">1000</text>
          </view>
        </view>
        <view class="card brand">
          <view class="locate"> <text class="icon-locate"></text>中国 </view>
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/brand_logo_5.jpg"
          ></image>
          <view class="name">小米优购</view>
          <view class="alt">小米优购闪购嗨购</view>
        </view>
        <view class="card goods">
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/goods_big_3.jpg"
          ></image>
          <view class="name"
            >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
            鹅软石桌布yg056</view
          >
          <view class="price">¥899</view>
        </view>
      </view>
    </template>
    <template v-if="tabIndex === 1">
      <view class="column">
        <view class="card goods">
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/goods_big_7.jpg"
          ></image>
          <view class="name"
            >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
            鹅软石桌布yg056</view
          >
          <view class="price">¥899</view>
        </view>
        <view class="card brand">
          <view class="locate"> <text class="icon-locate"></text>中国 </view>
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/brand_logo_8.jpg"
          ></image>
          <view class="name">小米优购</view>
          <view class="alt">小米优购闪购嗨购</view>
        </view>
        <view class="card topic">
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/topic_1.jpg"
          ></image>
          <view class="name">忙里忙外，回家吃饭</view>
          <view class="price">19.9元<text>起</text></view>
          <view class="extra">
            <text class="icon-heart">1220</text>
            <text class="icon-preview">1000</text>
          </view>
        </view>
        <view class="card brand">
          <view class="locate"> <text class="icon-locate"></text>中国 </view>
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/brand_logo_6.jpg"
          ></image>
          <view class="name">小米优购</view>
          <view class="alt">小米优购闪购嗨购</view>
        </view>
        <view class="card goods">
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/goods_big_6.jpg"
          ></image>
          <view class="name"
            >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
            鹅软石桌布yg056</view
          >
          <view class="price">¥899</view>
        </view>
      </view>
      <view class="column">
        <view class="card topic">
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/topic_2.jpg"
          ></image>
          <view class="name">忙里忙外，回家吃饭</view>
          <view class="price">19.9元<text>起</text></view>
          <view class="extra">
            <text class="icon-heart">1220</text>
            <text class="icon-preview">1000</text>
          </view>
        </view>
        <view class="card brand">
          <view class="locate"> <text class="icon-locate"></text>中国 </view>
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/brand_logo_5.jpg"
          ></image>
          <view class="name">小米优购</view>
          <view class="alt">小米优购闪购嗨购</view>
        </view>
        <view class="card goods">
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/goods_big_5.jpg"
          ></image>
          <view class="name"
            >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
            鹅软石桌布yg056</view
          >
          <view class="price">¥899</view>
        </view>
        <view class="card brand">
          <view class="locate"> <text class="icon-locate"></text>中国 </view>
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/brand_logo_7.jpg"
          ></image>
          <view class="name">小米优购</view>
          <view class="alt">小米优购闪购嗨购</view>
        </view>
        <view class="card goods">
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/goods_big_3.jpg"
          ></image>
          <view class="name"
            >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
            鹅软石桌布yg056</view
          >
          <view class="price">¥899</view>
        </view>
      </view>
    </template>
    <template v-if="tabIndex === 2">
      <view class="column">
        <view class="card goods">
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/goods_big_6.jpg"
          ></image>
          <view class="name"
            >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
            鹅软石桌布yg056</view
          >
          <view class="price">¥899</view>
        </view>
        <view class="card brand">
          <view class="locate"> <text class="icon-locate"></text>中国 </view>
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/brand_logo_8.jpg"
          ></image>
          <view class="name">小米优购</view>
          <view class="alt">小米优购闪购嗨购</view>
        </view>
        <view class="card topic">
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/topic_1.jpg"
          ></image>
          <view class="name">忙里忙外，回家吃饭</view>
          <view class="price">19.9元<text>起</text></view>
          <view class="extra">
            <text class="icon-heart">1220</text>
            <text class="icon-preview">1000</text>
          </view>
        </view>
        <view class="card brand">
          <view class="locate"> <text class="icon-locate"></text>中国 </view>
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/brand_logo_6.jpg"
          ></image>
          <view class="name">小米优购</view>
          <view class="alt">小米优购闪购嗨购</view>
        </view>
        <view class="card goods">
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/goods_big_7.jpg"
          ></image>
          <view class="name"
            >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
            鹅软石桌布yg056</view
          >
          <view class="price">¥899</view>
        </view>
      </view>
      <view class="column">
        <view class="card brand">
          <view class="locate"> <text class="icon-locate"></text>中国 </view>
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/brand_logo_7.jpg"
          ></image>
          <view class="name">小米优购</view>
          <view class="alt">小米优购闪购嗨购</view>
        </view>
        <view class="card topic">
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/topic_2.jpg"
          ></image>
          <view class="name">忙里忙外，回家吃饭</view>
          <view class="price">19.9元<text>起</text></view>
          <view class="extra">
            <text class="icon-heart">1220</text>
            <text class="icon-preview">1000</text>
          </view>
        </view>
        <view class="card goods">
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/goods_big_5.jpg"
          ></image>
          <view class="name"
            >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
            鹅软石桌布yg056</view
          >
          <view class="price">¥899</view>
        </view>
        <view class="card brand">
          <view class="locate"> <text class="icon-locate"></text>中国 </view>
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/brand_logo_5.jpg"
          ></image>
          <view class="name">小米优购</view>
          <view class="alt">小米优购闪购嗨购</view>
        </view>
        <view class="card goods">
          <image
            mode="widthFix"
            src="http://static.botue.com/erabbit/static/uploads/goods_big_3.jpg"
          ></image>
          <view class="name"
            >彩色鹅卵石小清新防水防烫长方形餐桌圆桌布艺茶几垫电视柜盖布
            鹅软石桌布yg056</view
          >
          <view class="price">¥899</view>
        </view>
      </view>
    </template>
  </view>
</template>

<script setup>
defineProps(["tabIndex"]);
</script>
<style lang="scss">
/* 瀑布流布局 */
.masonry {
  display: flex;
  justify-content: space-between;
  padding: 20rpx 0;
  .column {
    width: 345rpx;
    .card {
      padding: 20rpx 15rpx;
      margin-bottom: 20rpx;
      border-radius: 8rpx;
      background-color: #fff;
    }
  }
  .card {
    .name {
      font-size: 24rpx;
      color: #333;
      margin-top: 10rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .price {
      line-height: 1;
      font-size: 22rpx;
      color: #cf4444;
    }
    .locate {
      text-align: left;
      color: #999;
      margin-bottom: 10rpx;
      font-size: 24rpx;
    }
  }
  .topic {
    .price {
      margin: 10rpx 0;
      text {
        color: #999;
      }
    }
    .extra {
      line-height: 1;
      font-size: 22rpx;
      color: #666;
    }
  }
  .extra {
    text {
      margin-right: 14rpx;
      &::before {
        margin-right: 4rpx;
      }
    }
  }
  .icon-preview {
    &:before {
      font-size: 25rpx;
    }
  }
  .goods {
    .price {
      margin-top: 10rpx;
    }
  }
  .brand {
    text-align: center;
    .name {
      margin: 10rpx 0 8rpx;
    }
    .alt {
      line-height: 1;
      color: #666;
      font-size: 24rpx;
    }
  }
}
</style>